
function calculateCharacters(elem, max) {
    /* Calculates the number of remaining characters that are in the value of 'elem' */
    var chars = elem.get("value")
    return max - chars.length
}

function appendNode(elem, max) {
    /* Appends the node that tells the user how many characters remain */
    
    var p = elem.parentNode
    
    var e = document.createElement("div")
    e.set("class", "character-counter")
    e.set("for", elem.get("id"))
    e.innerHTML = "<span class='char-count'>" + max + "</span> characters remaining."
    
    p.insertBefore(e, elem.nextsibling)
}

function countCharacters(elem, max) {
    /* Event called when 'elem' changes -- calculates the number of characters remaining in elem */
    
    var node = $$(".character-counter[for='" + elem.get("id") + "']")[0].getElements("span.char-count")[0]
    node.innerHTML = calculateCharacters(elem, max)
}
    
var NavMenu = new Class({
    /* 
    A navigation menu!  Pass the initial element (the one that initiates the dropdown when clicked on) to init.
    The target element will have the id of the initial element prefaced with "for-"
    
    To disable the dropdown for an element, add the class "dropdown-disabled"
    
    NOTE:Make sure to create this class _after_ domready */
    initialize:function(element) {
        this.element = element
        this.targetElement = this.getTargetElement()
        
        if (!this.targetElement) {
            throw "ValueError: Target element for '" + this.element.get("id") + "' does not exist"
        }
        if (this.element.hasClass("dropdown-disabled")) {
            return
        }
        
        this.element.addEvent("click", function(e){
            this.handleClick(e)
        }.bind(this))
        
        $(document).addEvent("click", function(e) {
            this.handleOutsideClick(e)
        }.bind(this))
    },
    handleOutsideClick:function(e) {

        if (this.getVisible() && !this.targetElement.contains(e.target)) {
            if (!e.target.hasClass("dropdown")) {
                this.hideAllDropdowns()
            }
            this.hide()
        }
    },
    getVisible:function() {
        return this.targetElement.hasClass("dropdown-visible")
    },
    hide: function() {
        this.targetElement.removeClass("dropdown-visible")
    },
    getTargetElement:function() {
        var id = this.element.get("id")
        return $("for-" + id)
    },
    handleClick: function(e) {
        e.stop()
        if (this.getVisible()) {
            this.hide()
        }
        else {
            this.show()
        }
    },
    hideAllDropdowns:function() {
        $$(".dropdown").each(function(element) {
            if (element != this.targetElement) {
                element.removeClass("dropdown-visible")
            }
        })
    },
    show:function() {
        //Hide all other nav menus
        this.hideAllDropdowns()
        
        this.targetElement.addClass("dropdown-visible")
        
        this.moveTarget()
    },
    moveTarget:function() {
        coords = this.element.getPosition()
        size = this.element.getSize()
        
        this.left = coords.x
        this.top = coords.y + size.y
        this.targetElement.setStyles({
            left:this.left,
            top:this.top
        })
    }
})
Message = new Class({
    initialize:function(element) {
        this.element = element
        
        this.fx = new Fx.Slide(this.element, {
            duration:750
        })
        this.fx.hide()
        
        window.addEvent("load", function() {
            this.fx.slideIn()
        }.bind(this))
    }
})
window.addEvent("domready", function() {
    new NavMenu($("submit-dropdown"))
    new NavMenu($("project-dropdown"))
})